import { Button, Form, Input, Layout, message } from 'antd';
import React, { useCallback } from 'react';
import userService, { UINFO } from '@/services/userService';
import { history, useRequest } from 'ice';
import md5 from 'crypto-js/md5';

const { Content } = Layout;

export default function () {
  const { loading, request: login } = useRequest(userService.login);

  const handleFinish = useCallback((values) => {
    login({
      pwd: md5(values.pwd).toString()
    }).then((res) => {
      if (res.result) {
        UINFO.islogin = 'login';
        history.push('/dashboard');
      } else {
        message.warn(res.message);
      }
    })
  }, [login]);

  return <Layout style={{height: '100vh'}}>
    <Content style={{ textAlign: 'center', paddingTop: '160px' }}>
      <Form name="login_form" style={{ width: '300px', margin: 'auto' }} onFinish={handleFinish}>
        <Form.Item name="pwd" label="登录密码" rules={[{ required: true, message: '请输入登录密码!' }]}>
          <Input.Password />
        </Form.Item>
        <Form.Item>
          <Button type="primary" loading={loading} htmlType="submit" block>登录</Button>
        </Form.Item>
      </Form>
    </Content>
  </Layout>
}